<template>
	<view class="dindanxiang_body">
		<view class="body_tops">
			<view style="font-size: 20px; display: flex;justify-content: center;">
				<text
					style="font-size: 20px; display: flex;justify-content: center;flex-direction: column;margin-right: 10px;"
					class="iconfont">&#xe603;</text>
				<text style="font-weight: 600;">{{zhuangtai}}</text>
			</view>
			<view v-if="shouzhifu"
				style="display: flex;justify-content: center; font-size: 12px; margin: 15px 0 15px 0;">
				<text style="margin-right: 20px;">应付金额:￥{{listdata.price_total}} </text><text v-if="sjian">支付剩余</text>
				<text v-if="chaoshi" style="font-size: 12px;text-align: center;">取消原因：超时未支付</text>
				<u-count-down v-if="sjian" :time="time_timeA" format="DD:HH:mm:ss" autoStart millisecond
					@finish='finishs()' @change="onChange">
					<view class="time">
						<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;小时</text>
						<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
						<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
					</view>
				</u-count-down>
				<!-- <uni-countdown :show-day="true" :hour="12" :minute="12" :second="12"></uni-countdown> -->
			</view>



			<view style="display: flex;justify-content: center;">
				<button v-if="onzhifu" type="default"
					style="border: none; border-radius: 20px; width: 140px; font-size: 14px; color: red; background-color: #FFFFFF;">
					去支付</button>
				<button v-if="onshouboot" type="default"
					style="margin-top: 10px; border: none; border-radius: 20px; width: 140px; font-size: 14px; color: red; background-color: #FFFFFF;">
					再次购买</button>
			</view>
		</view>
		<view style="padding: 10px  0 0 0;">
			<view class="body_main_s">
				<view class="list_order_top">
					<view style="font-size: 13px; margin-top: 8px;">
						订单编号：{{listdata.order_no}}
					</view>
				</view>
				<view class="list_order" v-for="items in listdata.goodslist">

					<view class="list_order_body">
						<view style="font-size: 15px;margin-bottom: 15px;">
							<text class="iconfont" style="font-weight: 400; margin-right: 5px;">&#xe7a8;</text>康达农业商城
						</view>
						<view class="list_order_body_list">
							<view class="">
								<image style="border-radius: 5px; width: 100px;height: 100px; margin-right: 10px;"
									:src="items.logo" mode=""></image>
							</view>
							<view style="display: flex;justify-content: space-between;flex-direction: column;">
								<view style="font-size: 15px; font-weight: 600;">
									{{items.title}}
								</view>

								<view style="display: flex;justify-content: space-between;margin-bottom: 15px;">
									<text style="font-size: 18px; color: red;"><text
											style="font-size: 12px;">￥</text>{{items.price}}</text> <text
										style="font-size: 12px;">x{{items.number_goods}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="list_order_foot">
						<view class="listsum">
							共{{items.number_goods}}件商品
						</view>
					</view>
					<view style="height: 5px;background-color: #F7F7F7;">

					</view>

				</view>
				<view class="boont">
					<text @click="copy(listdata.order_no)">订单编号:{{listdata.order_no}} <text
							style="margin-left: 10px;">复制</text></text>
					<text v-if="shouzhifu">应付金额:<text>￥{{listdata.price_total}}</text></text>
				</view>
			</view>
		</view>
		<view class="botns">
			<view style="display: flex;justify-content: space-around; ">
				<view style="display: flex;justify-content: space-around; width: 100%;">
					<view style="display: flex;justify-content: center;flex-direction: column;">
						<view @click="toindex()"
							style="display: flex;justify-content: center;flex-direction: column; margin-right: 55px;">
							<text
								style="display: flex;justify-content: center;flex-direction: column; text-align: center;  font-size: 20px;"
								class="iconfont">&#xe60d;</text>
							<text style="text-align: center; font-size: 13px;" class="iconfont">菜单</text>

						</view>
					</view>

					<view style="display: flex;justify-content: space-around;">
						<button v-if="onshanchu" type="default" @click="postquxiao()"
							style="background-color: #FFFFFF;box-shadow: 0px 0px 1px 0px; font-size: 14px; border-radius: 20px; width: 100px; ">删除订单</button>

						<button v-if="onzhifu" type="default" @click="postquxiao()"
							style="background-color: #FFFFFF;box-shadow: 0px 0px 1px 0px; font-size: 14px; border-radius: 20px; width: 100px; ">取消订单</button>
						<button v-if="onzhifu" type="default"
							style="background-color: red;color: #FFFFFF; font-size: 14px; border-radius: 20px; width: 100px; margin-left: 10px;">去支付</button>
						<button @click="shopping()" v-if="onshouboot" type="default"
							style="background-color: red;color: #FFFFFF; font-size: 14px; border-radius: 20px; width: 100px; margin-left: 10px;">再次购买</button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sDate2: '',
				sjian: true,
				onshanchu: false,
				chaoshi: false,
				time_timeA: '1000',
				sDate1: new Date(),
				shouzhifu: false,
				timeData: {},
				listdata: [],
				zhuangtai: '',
				anzhuangtai: '',
				onshouboot: false,
				onzhifu: false,
				yinfu: 0,
				orderids: {
					orderid: ''
				},
				shoacarlist: {
					id: '',
					num: 0,
					type: '1'
				},
				gettime: {
					order_no: ''
				}
			}
		},
		onShow() {

			this.listdata.price_total = 0.00

			var this_ = this
			uni.getStorage({
				key: 'dindanxiangqing',
				success: function(res) {
					console.log(res.data);
					this_.listdata = res.data
					this_.gettime.order_no = res.data.order_no
					this_.getdqtime(res.data.order_no)
					console.log('***********************');
					for (var i = 0; i < this_.listdata.goodslist.length; i++) {
						console.log(this_.listdata.goodslist[i]);

						// this_.yinfu = this_.listdata.goodslist[i].price * this_.listdata.goodslist[i]
						// 	.number_sales

						// this_.shoacarlist.id = this_.yinfu = this_.listdata.goodslist[i].goods_id
					}
					console.log(this_.listdata);
					if (this_.listdata.status == 1) {
						this_.onzhifu = true
						this_.onshouboot = false
						this_.shouzhifu = true
						this_.zhuangtai = '未支付'
					}

					if (this_.listdata.status == 5) {
						this_.onshouboot = true
						this_.zhuangtai = '已完成'
						this_.onzhifu = false
						this_.shouzhifu = false
					}
					if (this_.listdata.status == 4) {
						this_.onshouboot = true
						this_.onzhifu = false
						this_.shouzhifu = false
						this_.zhuangtai = '已发货待收货'
					}
					if (this_.listdata.status == 3) {
						this_.onshouboot = true
						this_.onzhifu = false
						this_.shouzhifu = false
						this_.zhuangtai = '已支付待发货'
					}
					console.log('***********************');
				}
			})
			console.log("*************/*************");
			console.log(this.listdata);
			console.log("*************/*************");

		},
		methods: {

			finishs() {
				this.chaoshi = true
				this.sjian = false
				this.zhuangtai = '订单失效'
				console.log("******sss");
				this.onshouboot = true
				this.onzhifu = false
			},

			getdqtime(id) {

				this.gettime.order_no = id
				this.$http.getdqtime(this.gettime).then(res => {
					this.sDate2 = res.data
					console.log('*******************time*********');
					console.log(this.sDate2.date);
					console.log('*******************time*********');
					this.DateDiff(this.sDate2.date)
				})

			},

			DateDiff(sDate2s) {

				var date = new Date(),
					year = date.getFullYear(), //年
					month = date.getMonth() + 1, //月
					day = date.getDate(), //日
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), //分
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒


				console.log("555");
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				// hour >= 0 && hour <= 9 ? (hour = "0" + hour) : "";
				// minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
				// second >= 0 && second <= 9 ? (second = "0" + second) : "";
				var timeA = year + "-" + month + "-" + day + " " + hour + ':' + minute + ':' + second
				var timeB = year + month + day + hour + minute + second
				console.log('////////////////////////');
				console.log("开始：" + timeA);
				var timeD = sDate2s.replaceAll(" ", "")
				var timeDs = timeD.replaceAll("-", "")
				var timeDe = timeDs.replaceAll(":", "")
				console.log("timeDe+ 截止:" + timeDe);
				console.log("timeBe+ 开始:" + timeB);
				console.log("截止：" + sDate2s);
				console.log('////////////////////////');

				// console.log(new Date());
				var sDate1 = timeA
				var sDate2 = sDate2s
				var aDate, oDate1, oDate2, iDays;
				aDate = sDate1.split("-");
				oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为yyyy-MM-dd格式
				aDate = sDate2.split("-");
				oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2));
				console.log("毫秒：" + iDays);
				if (timeDe <= timeB) {
					this.time_timeA = 0
					this.sjian = false
					this.chaoshi = true
					this.zhuangtai = '已取消'
					this.onzhifu = false
					this.onshouboot = true
					this.onshanchu = true
				} else {
					this.time_timeA = iDays
					this.sjian = true
				}


			},




			onChange(e) {
				this.timeData = e
			},

			postquxiao() {
				this.orderids.orderid = this.listdata.order_no
				this.$http.postquxiao(this.orderids).then(res => {
					console.log(res);
					uni.$u.toast(res.msg);
					setTimeout(() => {
						uni.reLaunch({
							url: '../orderdetails/orderdetails'
						});
					}, 700);

				})
			},

			toindex() {
				uni.reLaunch({
					url: '../index/index'
				});
			},

			shopping() {

				var num = 0
				this.shoacarlist.num = num + 1
				this.$http.postshaopinadd(this.shoacarlist).then(res => {
					if (res.code == 40002) {
						this.shouquan = true
					} else {
						uni.$u.toast(res.msg);
						uni.reLaunch({
							url: '../shopping/shopping'
						});
					}

				})

			},

			copy(valuea) {
				var value = JSON.stringify(valuea)
				console.log('----------')
				//提示模板
				uni.showModal({
					content: value, //模板中提示的内容
					confirmText: '复制内容',
					success: () => { //点击复制内容的后调函数
						//uni.setClipboardData方法就是讲内容复制到粘贴板
						uni.setClipboardData({
							data: value, //要被复制的内容
							success: () => { //复制成功的回调函数
								uni.showToast({ //提示
									title: '复制成功'
								})
							}
						});
					}
				});
			},

		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3367375 */
		src: url('//at.alicdn.com/t/font_3367375_rwkx4qwxdn.woff2?t=1652679114641') format('woff2'),
			url('//at.alicdn.com/t/font_3367375_rwkx4qwxdn.woff?t=1652679114641') format('woff'),
			url('//at.alicdn.com/t/font_3367375_rwkx4qwxdn.ttf?t=1652679114641') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	.dindanxiang_body {
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		position: relative;
		background-color: #F7F7F7;
	}

	.botns {
		width: 100%;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		padding: 8px;
	}

	.body_main_s {
		height: 540px;
		overflow-y: scroll;
	}

	.body_xiangq {
		width: 100%;
	}

	.body_tops {
		background-color: #cb0000;
		background-image: url(../../static/xiangpj.png);
		background-size: cover;
		color: #FFFFFF;
		padding: 60px 0 20px 0;
	}

	.boots {
		display: flex;
		justify-content: flex-end;
	}

	.boots>button {
		background-color: #FFFFFF;
		font-size: 12px;
		margin: 0;
		margin-left: 15px;
	}

	.listsum {
		text-align: right;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.list_order_foot {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.list_order_body_list {
		display: flex;
		justify-content: space-between;
	}

	.list_order_body {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.list_order_top {
		display: flex;
		justify-content: space-between;
		padding-left: 20px;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
	}

	.list_order {
		padding: 15px;
		background-color: #FFFFFF;
		margin-bottom: 12px;
		border-radius: 0 0 15px 15px;
	}

	.boont {
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		border-radius: 0 0 15px 15px;
		padding: 8px;

	}
</style>
